<script setup>

import axios from "axios";
import {nextTick, ref, watch} from "vue";
import {ElMessage} from "element-plus";
import UploadHeaderAdd from "./UploadHeaderAdd.vue";

const props = defineProps({
  visible4Add: {
    type: Boolean,
    required: true,
  },roles: {
    type: Array,
    required: true,
  }
})

// 处理翻页，参数就是当前页码
const emit = defineEmits();

// 定义表单验证规则
const rules = ref({
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入用户姓名', trigger: 'blur' },
  ],
  roleId: [
    { required: true, message: '请选择职务', trigger: 'change' },
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1\d{10}$/, message: '请输入正确的11位手机号', trigger: 'blur' }
  ]

});
const form = ref(null);

// 添加用户的异步函数
const addUser = async () => {
  try {
    // 在提交前进行验证
    await form.value.validate((valid) => {
      if (valid) {
        axios.post('/user/add', user4Add.value)
            .then(() => {
              emit('update:visible4Add', false); // 关闭弹窗
              emit('add-success'); // 通知父组件添加成功
              ElMessage.success('添加成功');
              user4Add.value = {avatarUrl:'',
                status: 0,};
            })
            .catch(error => {
              ElMessage.error(error.message);
            });
      } else {
        console.log('表单验证失败');
        return false;
      }
    });
  } catch (error) {
    ElMessage.error(error.message);
  }
};


// 创建对子组件的引用
const uploadHeaderRef = ref(null);

const user4Add = ref({
  avatarUrl:'',
  status: 0,
})
// 监视子组件 currentImage 属性的变化
watch(() => uploadHeaderRef.value?.currentImage, (newImageUrl) => {
  if (newImageUrl) {
    user4Add.value.avatarUrl = newImageUrl;
    console.log(user4Add.value.avatarUrl)
  }else { user4Add.value.avatarUrl = '' }
}, { immediate: true }); // 立即运行一次以处理初始值

// 在父组件中定义 visible4Add 的 watcher
watch(() => props.visible4Add, async (newValue) => {
    await nextTick(); // 等待DOM更新
    if (uploadHeaderRef.value) {
      // 当弹窗显示时重置子组件的 currentImage
      uploadHeaderRef.value.resetCurrentImage();
    }
});


</script>

<template>
  <el-dialog :model-value="visible4Add"  title="添加用户" width="800px" @close="emit('update:visible4Add', false)">

    <div class="common-layout">
      <el-container>

        <el-aside width="400px">
          <el-form :model="user4Add" :rules="rules" ref="form">
          <el-form-item label="账号" label-width="100" prop="account">
            <el-input v-model="user4Add.account" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="密码" label-width="100" prop="password">
            <el-input v-model="user4Add.password" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="用户姓名" label-width="100" prop="name">
            <el-input v-model="user4Add.name" autocomplete="off"/>
          </el-form-item>

          <el-form-item label="职务" label-width="100" prop="roleId">
            <el-select v-model="user4Add.roleId" placeholder="请选择职务">
              <el-option v-for="(role,index) in roles" :key="index" :value="role.roleId" :label="role.roleName">
                {{role.roleName}}
              </el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="状态" label-width="100">
              <el-radio-group v-model="user4Add.status">
                <el-radio :value="0">未激活</el-radio>
                <el-radio :value="1">激活</el-radio>
                <el-radio :value="2">锁定</el-radio>
              </el-radio-group>
            </el-form-item>
          <el-form-item label="联系电话" label-width="100" prop="phone">
            <el-input v-model="user4Add.phone" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="备注" label-width="100">
            <el-input :rows="3" type="textarea" v-model="user4Add.remark" autocomplete="off"/>
          </el-form-item>
        </el-form>
        </el-aside>
        <el-container>
          <el-main>

        <upload-header-add ref="uploadHeaderRef" class="move-up" ></upload-header-add>


          </el-main>
        </el-container>
      </el-container>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('update:visible4Add', false)">取消</el-button>
        <el-button type="primary" @click="addUser()">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.move-up {
  margin-top: -60px; /* 向上移动20像素 */
}
</style>